{% extends 'base.html' %}

{% block title %}练习{% endblock %}

{% block content %}
<div class="container py-4">
    <h1 class="mb-4">练习题库</h1>
    
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="input-group">
                <input type="text" class="form-control" id="searchExercise" placeholder="搜索练习...">
                <button class="btn btn-outline-secondary" type="button" id="buttonSearch">搜索</button>
            </div>
        </div>
        <div class="col-md-4">
            <select class="form-select" id="filterDifficulty">
                <option value="0">所有难度</option>
                <option value="1">难度 1 (简单)</option>
                <option value="2">难度 2</option>
                <option value="3">难度 3 (中等)</option>
                <option value="4">难度 4</option>
                <option value="5">难度 5 (困难)</option>
            </select>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            {% if exercises %}
                <div class="row row-cols-1 row-cols-md-3 g-4" id="exercisesList">
                    {% for exercise in exercises %}
                        <div class="col">
                            <div class="card h-100 shadow-sm">
                                <div class="card-body">
                                    <h5 class="card-title">{{ exercise.title }}</h5>
                                    <p class="card-text text-truncate">{{ exercise.content|striptags|truncate(100) }}</p>
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <small class="text-muted">难度: 
                                            {% for i in range(1, 6) %}
                                                {% if i <= exercise.difficulty %}
                                                    <i class="bi bi-star-fill text-warning"></i>
                                                {% else %}
                                                    <i class="bi bi-star text-muted"></i>
                                                {% endif %}
                                            {% endfor %}
                                        </small>
                                        <small class="text-muted">课程: {{ exercise.course.title }}</small>
                                    </div>
                                </div>
                                <div class="card-footer bg-transparent border-top-0">
                                    <div class="d-grid gap-2">
                                        {% if exercise.id in completed_ids %}
                                            <a href="{{ url_for('student_do_exercise', exercise_id=exercise.id) }}" class="btn btn-outline-success">
                                                <i class="bi bi-check-circle-fill"></i> 已完成，再次练习
                                            </a>
                                        {% else %}
                                            <a href="{{ url_for('student_do_exercise', exercise_id=exercise.id) }}" class="btn btn-primary">
                                                开始练习
                                            </a>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="alert alert-info">
                    暂无练习可用，请稍后再查看。
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 搜索功能
    $("#buttonSearch").click(function() {
        filterExercises();
    });
    
    $("#searchExercise").keyup(function(e) {
        if (e.keyCode === 13) {
            filterExercises();
        }
    });
    
    // 难度筛选
    $("#filterDifficulty").change(function() {
        filterExercises();
    });
    
    function filterExercises() {
        var searchText = $("#searchExercise").val().toLowerCase();
        var difficulty = $("#filterDifficulty").val();
        
        $("#exercisesList .col").each(function() {
            var title = $(this).find(".card-title").text().toLowerCase();
            var content = $(this).find(".card-text").text().toLowerCase();
            var cardDifficulty = $(this).find(".bi-star-fill").length;
            
            var matchesSearch = title.includes(searchText) || content.includes(searchText);
            var matchesDifficulty = difficulty == 0 || cardDifficulty == difficulty;
            
            if (matchesSearch && matchesDifficulty) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }
});
</script>
{% endblock %} 